@import '~scss/variables';
@import '~scss/mixins';

.container {
  height: 64px;
  border-radius: 4px;
  background-color: $white;
  margin-bottom: 12px;
}

.selectContainer {
  height: 66px;
  padding: 12px;
  border-radius: 4px;
  border: dashed 1px $light-color06;
  background-color: $white;
  cursor: pointer;
  box-sizing: border-box;

  .icon {
    float: left;
    width: 40px;
    height: 40px;
    padding: 4px;
    margin-right: 12px;
  }
  .title {
    height: 20px;
    @include TypographyTitleH6;
  }
  .desc {
    height: 20px;
    @include ellipsis;
    @include TypographyParagraph($dark-color01);
  }
}

.uploadContainer {
  display: flex;
  height: 66px;
  padding: 12px;
  border-radius: 4px;
  border: solid 1px $border-color;
  background-color: $white;
  box-sizing: border-box;

  .icon {
    flex-basis: 40px;
    height: 40px;
    padding: 4px;
    margin-right: 12px;
  }
  .uploadingContent {
    flex-grow: 1;
    height: 100%;
    .fileInfo {
      height: 20px;
      .fileName {
        height: 20px;
        @include TypographyTitleH6;
      }
      .uploadText {
        margin-right: 5px;
        float: right;
        @include TypographyParagraph($dark-color01);
      }
    }

    .progress {
      height: 20px;
      padding-top: 6px;
      display: block;
      width: 100%;

      :global(.lego-progress-inner) {
        height: 8px;
        border-radius: 2px;
        background-color: $light-color02;
      }
      :global(.lego-progress-bg) {
        height: 8px;
        border-radius: 2px;
        background-color: $primary;
      }
    }
  }
  .uploadIcon {
    cursor: pointer;
    flex-basis: 40px;
    height: 40px;
    padding: 8px;
    margin-left: 12px;
  }
}

.none {
  display: none;
}
